<template>
    <div class="page-article" v-if="model">
        <div class="d-flex py-3 px-2 border-bottom">
            <div class="iconfont text-blue px-2">&lt;</div>
            <strong class="flex-1 text-blue text-xs">
                {{model.title}}
            </strong>
            <div class="text-grey fs-xs">2019-10-10</div>
        </div>
        <div v-html="model.body" class="px-3 body fs-lg text-center mt-3"></div>
        <div class="px-3 border-top py-2">
            <div class="d-flex ai-center">
                <i class="iconfont icon-caidan1 py-1 pr-2"></i>
                <strong class="text-blue">相关资讯</strong>
            </div>
            <div class="pt-3">
                <router-link class="py-1" :to="`/articles/${item._id}`" tag="div" v-for="item in model.related" :key="item._id">
                    {{item.title}}
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        id:{required :true}
    },
    data(){
        return{
            model:null
        }
    },
    methods:{
        async fetch(){
            const res = await this.$http.get(`/articles/${this.id}`)
            this.model = res.data
        }
    },
    watch:{
        id:'fetch',
        // id(){
        //     this.fetch
        // }
    },
    created(){
        this.fetch()
    }
}
</script>

<style lang="scss">
.page-article{
    .iconfont{
        font-size: 1.5385rem;
    }
    .body{
        img{
            max-width: 100%;
        height: auto;
        }
    }
}
</style>